<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo">
        <span>含分布式电源配电网综合评估平台</span>
      </div>
    </a-layout-header>
    <a-layout-content style="margin-top: 5px">
      <a-layout style="padding: 0px 10px;min-height: calc(100vh - 69px);">
        <a-layout-sider style="width: 200px;">
          <a-menu
            v-model:selectedKeys="menuTest"
            mode="inline"
            :items="items"
            style="height: 100%"
            @select="select"
          >
          </a-menu>
        </a-layout-sider>
        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
          <RouterView/>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
import {parseACLINE, xml2Json} from "@/utils/mapDataParser";

const router = useRouter();
const menuTest = ref([1])
const items = ref([
  {
    key: 1,
    title: '评估对象',
    label: '评估对象',
    path: '/evaluationTarget'
  },
  {
    key: 2,
    title: '短路电流计算校核',
    label: '短路电流计算校核',
    path: '/shortCircuit'
  },
  {
    key: 3,
    title: '电压偏差计算校核',
    label: '电压偏差计算校核',
    path: '/voltageDeviation'
  },
  {
    key: 4,
    title: '安全性',
    label: '安全性',
    path: '/safety'
  },
  {
    key: 5,
    title: '经济性',
    label: '经济性',
    path: '/economic'
  },
  {
    key: 6,
    title: '供电质量',
    label: '供电质量',
    path: '/powerQuality'
  },
  {
    key: 7,
    title: '继电保护',
    label: '继电保护',
    path: '/relayProtection'
  },
  {
    key: 8,
    title: '综合评估',
    label: '综合评估',
    path: '/comprehensiveEvaluation'
  }
])

function select (item) {
  console.log(item)
  router.push(item.item.path)
}

onMounted(async ()=>{
  const raw = await xml2Json()
  const data = parseACLINE(raw)
  console.log('ACLINE DATA', data)
})

</script>
<style>
:where(.css-dev-only-do-not-override-185kyl0).ant-menu .ant-menu-item, :where(.css-dev-only-do-not-override-185kyl0).ant-menu .ant-menu-submenu, :where(.css-dev-only-do-not-override-185kyl0).ant-menu .ant-menu-submenu-title {
  border-radius: 0px !important;
}
</style>
<style scoped>

#components-layout-demo-top-side .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.logo {
  text-align: center;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
}

.ant-row-rtl #components-layout-demo-top-side .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
